<!-- 关联题库 --> 
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="1500px"
    append-to-body
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog-content">
      <!-- 左侧树形菜单 -->
      <div class="tree-panel">
        <div class="head-container">
          <el-input
            v-model="projectName"
            placeholder="请输入培训项目"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px; width: 70%"
            @keyup.enter.native="filterTree"
          />
        </div>
        <el-tree
          ref="tree"
          :data="projectOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        />
      </div>

      <!-- 右侧内容区 -->
      <div class="right-panel">
        <!-- 搜索区域 -->
        <el-form :model="queryParams" inline size="small" label-width="80px">
          <el-form-item label="题组">
            <el-input
              v-model="queryParams.groupName"
              placeholder="请输入题组关键词"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="关联状态">
            <el-select
              v-model="queryParams.relateStatus"
              placeholder="请选择关联状态"
              clearable
            >
              <el-option
                v-for="(label, value) in dict.relate_status"
                :key="value"
                :label="label"
                :value="value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="queryParams.rangeTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="创建人">
            <el-input
              v-model="queryParams.createBy"
              placeholder="请输入创建人"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table
          :data="groupList"
          v-loading="loading"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />

          <el-table-column prop="groupName" label="题组" align="center" />

          <el-table-column prop="groupType" label="题组类型" align="center">
            <template slot-scope="scope">
              <span>{{ dict.question_type[Number(scope.row.groupType)] }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="trainingProjectName"
            label="培训项目"
            align="center"
          />

          <el-table-column prop="questionCount" label="题量" align="center" />

          <el-table-column prop="createBy" label="创建人" align="center" />

          <el-table-column prop="createTime" label="创建时间" align="center" />
        </el-table>

        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getListInfo,
  getTrainingProjects,
} from "@/api/examination/questionGroup";
import DictTag from "@/components/DictTag";
import { projectTreeSelect } from "@/api/training/projects";

export default {
  name: "RelateQuestionGroupDialog",
  components: { DictTag },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    questionId: {
      type: String,
      default: () => {},
    },
    questionType: {
      type: String,
      default: () => {},
    },
    dict: { type: Object, required: true, default: () => {} },
  },
  data() {
    return {
      dialogTitle: "关联题组",
      projectName: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        groupName: null,
        relateStatus: null,
        rangeTime: null,
        createBy: null,
      },
      groupList: [],
      total: 0,
      loading: false,
      selectedGroups: [],
      //树形结构数据
      // 所有部门树选项
      projectOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.initData();
      }
    },
    projectName(val) {
      this.$refs.tree.filter(val);
      this.getProjectTree(val);
    },
  },
  created() {
    this.getProjectTree();
  },
  methods: {
    initData() {
      this.getList();
    },

    // 获取树形数据
    getProjectTree(val) {
      var params = { projectName: val };
      params.projectId = this.queryParams.projectId;
      projectTreeSelect(params).then((response) => {
        this.projectOptions = response.data;
        this.enabledProjectOptions = this.filterDisabledDept(
          JSON.parse(JSON.stringify(response.data))
        );
      });
    },

    filterTree() {
      this.$refs.tree.filter(this.projectName);
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    handleNodeClick(data) {
      this.queryParams.trainingProjectId = data.id;
      this.queryParams.pageNum = 1;
      this.getList();
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      // 将时间范围拆分为 start 和 end
      if (this.queryParams.rangeTime) {
        this.queryParams.createStartTime = this.queryParams.rangeTime[0];
        this.queryParams.createEndTime = this.queryParams.rangeTime[1];
      }
      this.getList();
    },

    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        groupName: null,
        relateStatus: null,
        createStartTime: null,
        createEndTime: null,
        createBy: null,
      };
      this.handleQuery();
    },

    getList() {
      this.loading = true;
      var params = {
        ...this.queryParams,
        questionId: this.questionId,
        groupType: this.questionType,
        // questionGroupIds: [],
      };

      getListInfo(params).then((response) => {
        this.groupList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    handleSelectionChange(selection) {
      this.selectedGroups = selection;
    },

    confirm() {
      if (this.selectedGroups.length === 0) {
        this.$message.warning("请至少选择一个题组！");
        return;
      }

      this.$emit(
        "confirm",
        this.selectedGroups.map((g) => g.groupId)
      );
      this.visible = false;
    },

    cancel() {
      this.resetAll();
      this.$emit("update:visible", false);
    },

    handleClose() {
      this.resetAll();
      this.selectedGroups = [];
      this.$emit("update:visible", false);
    },
    resetAll() {
      // 重置查询条件
      this.resetQuery();

      // 清空选择项
      this.selectedGroups = [];

      // 重置树形筛选
      this.projectName = "";

      // 清空树的选中状态（如果需要）
      if (this.$refs.tree) {
        this.$refs.tree.setCurrentKey(null);
      }
    },
  },
};
</script>

<style scoped>
.dialog-content {
  display: flex;
  height: 750px;
}

.tree-panel {
  width: 300px;
  border-right: 1px solid #ebeef5;
  overflow-y: auto;
}

.right-panel {
  flex: 1;
  padding: 10px;
}
</style>







